<template>
	<view class="nav-wrap uni-p-b-98 acea-row row-between-wrapper">
		<block v-for="(tab,index) in menubar" :key="index">
			<view :class="tab.pagePath !== activeRouter ? 'nav-item':'nav-item selected'" class="acea-row row-center-wrapper row-column" @click="goRouter(tab)">
				<view class="pic">
					<text class="iconfont" :class="tab.iconPath" :style="{color:tab.pagePath !== activeRouter ? '':'#C31026'}"></text>
					<!-- <image :src="tab.pagePath !== activeRouter ? tab.iconPath : tab.selectedIconPath"></image> -->
				</view>
				<view class="title">{{tab.text}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		computed: {
			
		},
		data(){
			return{
				menubar: [{
						"pagePath": "/pages/main/index/index",
						"iconPath": "icon-shouye",
						"selectedIconPath": require("@/static/tab/homed.png"),
						"text": "首 页"
					},
					{
						"pagePath": "/pages/news/index",
						"iconPath": "icon-xinwenzixun",
						"selectedIconPath": require("@/static/tab/newd.png"),
						"text": "新 闻"
					},
					{
						"pagePath": "/pages/main/user/index",
						"iconPath": "icon-huiyuan",
						"selectedIconPath": require("@/static/tab/userd.png"),
						"text": "我 的"
					}
				],
				activeRouter:''
			}
		},
		created() {
			uni.hideTabBar()
			let routes = getCurrentPages(); //获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute;
			console.log('activeRouter',this.activeRouter)
		},
		methods: {
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.pagePath == page) return
				if (['/pages/main/index/index',
						'/pages/main/user/index',
						'/pages/news/index'
					].indexOf(item.pagePath) > -1) {
					uni.switchTab({
						url: item.pagePath,
						fail(err) {
							uni.redirectTo({
								url: item.pagePath
							})
						}
					})
				} else {
					uni.navigateTo({
						url: item.pagePath
					})
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav-wrap{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		z-index: 99;
		background: linear-gradient(to bottom, #f2f5f7 0%, #cecece 100%);
		.nav-item{
			width: 33.3%;
			.pic{
				width: 48rpx;
				height: 48rpx;
				image{
					width: 100%;
					height: 100%;
				}
				.iconfont{
					font-size: 48rpx;
				}
			}
		}
		.selected{
			color: #C31026;
		}
	}
</style>
